<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>荔枝瑰夏</title>
    <link rel="icon"  href="/img/蛋糕.svg" />
    <meta name="keywords"
        content="荔枝瑰夏,MCAKE官网,蛋糕在线预订,生日蛋糕,儿童蛋糕,商务蛋糕,婚庆蛋糕,拿破仑蛋糕,奶油蛋糕,慕斯蛋糕,芝士蛋糕,巧克力蛋糕,坚果蛋糕,乳酪蛋糕,水果蛋糕,冰激凌蛋糕">
    <meta name="description" content="平阴重瓣玫瑰洋洋洒洒,云南玫瑰花酱馥郁芬芳,Q弹的荔枝果肉口感十足,清爽甜蜜。果味与花香交织,写尽夏日奇幻浪漫。">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/liMarquee.css">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/goods.css">
    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <style>
        .img img {
            display: flex;
            width: 100%;
        }
        .img_1{
            margin-top: 88px;
            text-align: center;
        }
        .img_1 img{
            width: 1126px;
        }
    </style>
</head>

<body>
    <div id="app">
    <div class="home-header clear">
        <div class="jqScrollBox">
            <div class="jqScroll" id="jqscrollobj"></div>
        </div>

        <div class="header-content clear">
            <div class="header-left">
                <div class="logo">
                    <a href="/"><img src="./img/logo.png" alt="MCAKE" /></a>
                </div>
                <div class="location">
                    <a class="location-a">
                        <span class="now-city"> 珠海</span>
                    </a>
                </div>
                <div class="products">
                    <span class="head-span">所有产品</span>
                    <i class="i-line"></i>
                </div>
                <div class="home">
                    <a href="./sy/cookie.html">
                        <span class="head-span">首页</span>
                        <i class="i-line"></i>
                    </a>
                </div>
                <div class="cakes">
                    <a href="./cake.html">
                        <span class="head-span">蛋糕</span>
                        <i class="i-line"></i>
                    </a>
                </div>
                <div class="breads">
                    <a href="mb.html">
                        <span class="head-span">面包</span>
                        <i class="i-line"></i>
                    </a>
                </div>
                <div class="smalls">
                    <a href="snack.html">
                        <span class="head-span">小食</span>
                        <i class="i-line"></i>
                    </a>
                </div>
                <div class="bds">
                    <a href="test.html">
                        <span class="head-span">企业专区</span>
                        <i class="i-line"></i>
                    </a>
                </div>

            </div>
            <div class="header-right">

                <div class="login-header">
                    <!-- <img src="/static/img/login.png" alt="登陆"/> -->
                    <span class="head-span">
                        <span class="head-span">
                            <a href="../register.html">
                                <span class="zhuce">注册</span>
                            </a>
                            &nbsp;|&nbsp;
                            <a href="../Login.html">
                                <span class="login">登录</span>
                            </a>
                        </span>
                    </span>
                </div>
                <div class="mycar" style="cursor: pointer;">
                    <a href="./ShoppingCart.html"><img class="bag1" src="./img/bag1.png" alt="购物车" /></a>
                    <i class="mycar-num"></i>
                    <!--  <span class="head-span">购物车</span> -->
                 </div>
                <div class="activity">
                    <img class="icon02" src="./img/icon02.png" alt="活动" />

                </div>
            </div>
        </div>
        <!-- 挡板 -->
        <div class="blank"></div>
    </div>
    
    
    <div class="all-right">
        <a href="#"><img src="/img/pic04.png"></a>
        <a href="#"><img src="/img/pic05.png"></a>
    </div>
    <div class="all-x"></div>
    

    <!-- 内容 -->
    <div class="detail-content" data-id="18638">
        <div class="img">
            <img :src="getImgUrl(dg_id.img2)" style=" margin: 0 auto;"/>
        </div>
        <div class="detail-box">
            <div class="detail-top-wrap">
                <div class="detail-top">
                    <div class="top-left">
                        <div class="info">
                            <div class="info-left title">
                                <!-- <img :src="getImgUrl(dg_id.img)"  style="margin: 0 auto;"/> -->
                                <h2>{{dg_id.name}}<span class="pingjia-span">商品评价</span> </h2>
                                <div class="right-t">
                                    <span class="span02">{{dg_id.english}}</span>
                                    <!--<span class="span01">提前5小时预定</span>-->
                                    <p>
                                        <span style="margin-left: 0;" class="tag">{{dg_id.type.t_type}}</span>
                                        <span style="margin-left: 0;" class="tag">{{dg_id.fl.cf}}</span>
                                    </p>
                                </div>
                                <div class="right-m">
                                    <p><span class="mr" style="display: block; float: left;">口味基底</span><span
                                            style="margin-left: 98px;display: block;">Cream</span></p>
                                    <p><span class="mr" style="display: block; float: left;">口感</span><span
                                            style="margin-left: 98px;display: block;">清爽香甜</span></p>
                                    <p><span class="mr" style="display: block; float: left;">口味</span><span
                                            style="margin-left: 98px;display: block;">荔枝/玫瑰/奶油</span></p>
                                    <p><span class="span-sweet">甜味</span>
                                        <span class="span-img">
                                            <img src="/img/dot01.png" />
                                            <img src="/img/dot01.png" />
                                            <img src="/img/dot02.png" />
                                            <img src="/img/dot02.png" />
                                            <img src="/img/dot02.png" />
                                        </span>
                                    </p>
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="top-right">
                        <div class="pond"
                            data-data="W3siaWQiOjE4NjM5LCJza3UiOiJDMTEwMSIsImFoZWFkIjoiXHU2M2QwXHU1MjRkNVx1NWMwZlx1NjVmNlx1OTg4NFx1NWI5YSIsImVkaWJsZSI6IjItM1x1NGViYVx1OThkZiIsIm5hbWUiOiJcdTgzNTRcdTY3OWRcdTc0NzBcdTU5MGYiLCJmcmVuY2giOiJMeWNoZWUgUm9zXHUwMGU5IGQnXHUwMGM5dFx1MDBlOSIsInNwZWMiOiIxXHU3OGM1Iiwic2FsZVByaWNlIjoiMjE4LjAwIiwicHByaWNlIjoiMjE4LjAwIiwic2l6ZSI6IjEzY20qN2NtIiwiY2l0eUlkIjo2NDEsInVzZUZsZyI6MSwid2VpZ2h0IjoiNDU0ZyIsImZpdHRpbmdzIjp7IjUxIjp7ImlkIjo1MSwibmFtZSI6Ilx1OTkxMFx1NTE3NyIsInVpZCI6MSwidW5hbWUiOiJcdTU5NTciLCJudW0iOjUsInNhbGUiOjAsInByaWNlIjoiMC4wMCIsImltZyI6IiIsImJ1eSI6MH0sIjUzIjp7ImlkIjo1MywibmFtZSI6Ilx1NzUxZlx1NjVlNVx1ODcyMVx1NzBkYiIsInVpZCI6NSwidW5hbWUiOiJcdTY1MmYiLCJudW0iOjEsInNhbGUiOjAsInByaWNlIjoiMC4wMCIsImltZyI6Imh0dHA6XC9cL3d3dy5tY2FrZS5jb21cL3Bvc3RzeXN0ZW1cL2RvY3Jvb3RcL2ltYWdlc1wvc3lzdGVtXC9maXR0aW5nc1wvMjAxNzA5MjdcLzIwMTcwOTI3MTMyNDA3NjY0MzguanBnIiwiYnV5IjowfX0sInBpYyI6eyJ1cmwiOiJodHRwczpcL1wvc3RhdGljLm1jYWtlLmNvbVwvbmV3X2dvb2RzXC9saXpoaWd1aXhpYSIsImxpc3QiOlt7ImIiOiJcL2JpZ1wvMS5qcGciLCJtIjoiXC9taWRkbGVcLzEuanBnIiwicyI6Ilwvc21hbGxcLzEuanBnIn0seyJiIjoiXC9iaWdcLzIuanBnIiwibSI6IlwvbWlkZGxlXC8yLmpwZyIsInMiOiJcL3NtYWxsXC8yLmpwZyJ9LHsiYiI6IlwvYmlnXC8zLmpwZyIsIm0iOiJcL21pZGRsZVwvMy5qcGciLCJzIjoiXC9zbWFsbFwvMy5qcGcifSx7ImIiOiJcL2JpZ1wvNC5qcGciLCJtIjoiXC9taWRkbGVcLzQuanBnIiwicyI6Ilwvc21hbGxcLzQuanBnIn1dfSwiZnJvbSI6MH0seyJpZCI6MTg2NDAsInNrdSI6IkMxMTAyIiwiYWhlYWQiOiJcdTYzZDBcdTUyNGQ1XHU1YzBmXHU2NWY2XHU5ODg0XHU1YjlhIiwiZWRpYmxlIjoiNC03XHU0ZWJhXHU5OGRmIiwibmFtZSI6Ilx1ODM1NFx1Njc5ZFx1NzQ3MFx1NTkwZiIsImZyZW5jaCI6Ikx5Y2hlZSBSb3NcdTAwZTkgZCdcdTAwYzl0XHUwMGU5Iiwic3BlYyI6IjJcdTc4YzUiLCJzYWxlUHJpY2UiOiIzMTguMDAiLCJwcHJpY2UiOiIzMTguMDAiLCJzaXplIjoiMTdjbSo3Y20iLCJjaXR5SWQiOjY0MSwidXNlRmxnIjoxLCJ3ZWlnaHQiOiI5MDhnIiwiZml0dGluZ3MiOnsiNTEiOnsiaWQiOjUxLCJuYW1lIjoiXHU5OTEwXHU1MTc3IiwidWlkIjoxLCJ1bmFtZSI6Ilx1NTk1NyIsIm51bSI6MTAsInNhbGUiOjAsInByaWNlIjoiMC4wMCIsImltZyI6IiIsImJ1eSI6MH0sIjUzIjp7ImlkIjo1MywibmFtZSI6Ilx1NzUxZlx1NjVlNVx1ODcyMVx1NzBkYiIsInVpZCI6NSwidW5hbWUiOiJcdTY1MmYiLCJudW0iOjEsInNhbGUiOjAsInByaWNlIjoiMC4wMCIsImltZyI6Imh0dHA6XC9cL3d3dy5tY2FrZS5jb21cL3Bvc3RzeXN0ZW1cL2RvY3Jvb3RcL2ltYWdlc1wvc3lzdGVtXC9maXR0aW5nc1wvMjAxNzA5MjdcLzIwMTcwOTI3MTMyNDA3NjY0MzguanBnIiwiYnV5IjowfX0sInBpYyI6eyJ1cmwiOiJodHRwczpcL1wvc3RhdGljLm1jYWtlLmNvbVwvbmV3X2dvb2RzXC9saXpoaWd1aXhpYSIsImxpc3QiOlt7ImIiOiJcL2JpZ1wvMS5qcGciLCJtIjoiXC9taWRkbGVcLzEuanBnIiwicyI6Ilwvc21hbGxcLzEuanBnIn0seyJiIjoiXC9iaWdcLzIuanBnIiwibSI6IlwvbWlkZGxlXC8yLmpwZyIsInMiOiJcL3NtYWxsXC8yLmpwZyJ9LHsiYiI6IlwvYmlnXC8zLmpwZyIsIm0iOiJcL21pZGRsZVwvMy5qcGciLCJzIjoiXC9zbWFsbFwvMy5qcGcifSx7ImIiOiJcL2JpZ1wvNC5qcGciLCJtIjoiXC9taWRkbGVcLzQuanBnIiwicyI6Ilwvc21hbGxcLzQuanBnIn1dfSwiZnJvbSI6MH1d">
                            <div v-for="kg_id in kg" :key="kg_id.id" class="pick-pond pond-02 pond-cur" data-id="18639">
                                <input type="radio" name="kg" v-model="dg_id.kg
                                " :value="kg_id.kg" class="p1">{{kg_id.kg}}
                                <input type="radio" name="price" v-model="dg_id.price
                                " :value="kg_id.price">
                                ￥{{kg_id.price}}</input>
                                <!-- <span class="p2">{{kg_id.price}}￥</span> -->                     
                                
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="right-b">
                            <div class="right-c">
                                <div class="right-c-left">
                                    <p class="mb fittings">
                                        <img style="width: 1rem;padding-right: 0.5rem"
                                            src="https://h5.mcake.com/static/images/icon_nb1.png">
                                        <span class="tableware" style="font-size:14px;">含5套餐具</span>
                                    </p>
                                    <p class="size">生产日期：{{dg_id.date}}</p>
                                    <p style="color: #f0250f;margin-top: 20px;"><i
                                            class="icon-gantanhao"></i>蛋糕若不及时食用请放置0-10℃冷藏</p>
                                </div>
                                <div class="right-c-right">
                                </div>
                            </div>
                            <p id="p-btn" style="text-align: right; padding-right: 40px;"><button class="buy-now"
                                    data-sku="C1101">立即订购</button><button @click="add(dg_id)" class="add-cart"
                                    data-sku="C1101">加入购物车</button></p>
                            <p id="p-btn-sq" style="text-align: right; padding-right: 40px;display: none;" data-val="1">
                                <button style="color: #ffff;background-color: #d2d2d2;border-radius: 30px;"
                                    data-sku="C1101" onclick="mcake.msg.error('对不起,该商品已下架或售罄');">售 罄</button>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="img_1">
                    <img :src="getImgUrl(dg_id.img3)" style=" margin:  auto;"/>
                </div>
                <div class="detail-ad">
                </div>
            </div>
            <div class="detail-bottom">
                <div class="description">

                </div>
                <!-- 加购配件 -->
                <div class="add-items">
                    <h2>选个配件</h2>
                    <div class="item-list-wrap">
                        <div class="item-list">
                            <div class="item">
                                <img class="item-img" src="https://static.mcake.com/new_goods/baowenbao/list/1.jpg">
                                <h3>保温包</h3>
                                <p><span class="price count"><i class="rmb">￥</i>10.00</span><img class="add-car"
                                        src="./img/car1.png"></p>
                            </div>
                            <div class="item">
                                <img class="item-img"
                                    src="https://static.mcake.com/new_goods/xinshuzilazhu/PJ0201/list/1.jpg">
                                <h3>数字蜡烛</h3>
                                <p><span class="price count"><i class="rmb">￥</i>3.00</span><img class="add-car"
                                        src="./img/car1.png"></p>
                            </div>
                            <div class="item">
                                <img class="item-img"
                                    src="https://static.mcake.com/new_goods/zimulazhuhb/PJ0115/list/1.jpg">
                                <h3>字母蜡烛(HB)</h3>
                                <p><span class="price count"><i class="rmb">￥</i>15.00</span><img class="add-car"
                                        src="./img/car1.png"></p>
                            </div>
                            <div class="item">
                                <img class="item-img"
                                    src="https://static.mcake.com/new_goods/zuanshixinlazhu/PJ0113/list/1.jpg">
                                <h3>钻石心蜡烛</h3>
                                <p><span class="price count"><i class="rmb">￥</i>5.00</span><img class="add-car"
                                        src="./img/car1.png"></p>
                            </div>
                            <div class="item">
                                <img class="item-img" src="https://static.mcake.com/new_goods/canju/PJ0112/list/1.jpg">
                                <h3>餐具</h3>
                                <p><span class="price count"><i class="rmb">￥</i>2.50</span><img class="add-car"
                                        src="./img/car1.png"></p>
                            </div>
                            <div class="item">
                                <img class="item-img"
                                    src="https://static.mcake.com/new_goods/xiaoshilindai/PJ112/list/1.jpg">
                                <h3>小食拎袋</h3>
                                <p><span class="price count"><i class="rmb">￥</i>3.00</span><img class="add-car"
                                        src="./img/car1.png"></p>
                            </div>
                            <div class="item">
                                <img class="item-img"
                                    src="https://static.mcake.com/new_goods/shengrilazhuewaijiagou/PJ0114/list/1.jpg">
                                <h3>生日蜡烛</h3>
                                <p><span class="price count"><i class="rmb">￥</i>2.00</span><img class="add-car"
                                        src="./img/car1.png"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item-pingjia">
                    <!-- 商品评价 -->
                    <h2>商品评价</h2>
                    <div class="goods-comment">
                    </div>
                </div>
                </script>
            </div>
        </div>
    </div>
    <!--添加到购物车 弹窗 -->
    <div id="pop"></div>
</div>
</div>
</div>
</div>
</div>

    <script id="pop-goods-select" type="text/x-jquery-tmpl"></script>

    <!--注册协议 结束-->
    <div class="footer">
        <div class="footer-cont">
            <div class="footer-top clear">
                <div class="footer-left">
                    <div class="foot-logo"><img src="./img/logo1.png">
                        <div class="left-p">
                            <p>订购热线:4006-678-678(8:00 - 20:00)</p>
                            <p>客服邮箱:cs@mcake.com</p>
                            <p>地址:上海市普陀区同普路1130弄3号楼</p>
                            <p class="gov-p"><a href="//static.mcake.com/file/5ef5931c2226a424/c9907a053fdbcab9.jpg"
                                    target="_blank">食品生产许可证:SC12431010700121</a></p>
                        </div>
                    </div>
                </div>
                <div class="footer-right">
                    <div class="right-top clear">
                        <div class="about">
                            <h3>关于我们</h3>
                            <p><a href="/page/about" title="企业介绍">企业介绍</a></p>
                            <p><a href="/page/media" title="媒体合作">媒体合作</a></p>
                            <p><a href="/article/id/61">招贤纳士</a></p>
                            <p><a href="/article/id/47">呼叫中心</a></p>
                        </div>
                        <div class="help">
                            <h3>帮助中心</h3>
                            <p><a href="/page/advice" title="投诉与建议">投诉与建议</a></p>
                            <p><a href="/page/member" title="会员权益">会员权益</a></p>
                            <p><a href="/page/shopping" title="购物指南">购物指南</a></p>
                            <p><a href="/article/id/57">支付类</a></p>
                            <p><a href="/article/id/56">订单相关</a></p>
                            <p><a href="/page/maps">配送服务</a></p>
                        </div>
                        <div class="find">
                            <h3>发现</h3>
                            <p><a href="/article/id/65">公告</a></p>
                        </div>
                        <div class="wei">
                            <a href="#">
                                <img title="关注微博" alt="新浪微博" class="weibo" src="./img/weibo.png">
                            </a>
                            <img title="关注公众号" alt="微信公众号" class="weixin" src="./img/weixin.png">

                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="right-bot clear">
                    <div class="bot-p1">
                        <p>上海卡法电子商务有限公司</p>
                        <p>地址:上海市普陀区同普路1130弄3号楼</p>
                        <p>洽谈电话:021-52691591</p>
                        <p class="gov-p"><a href="//static.mcake.com/file/45bd630382f3722e/1e072161a0cfb0f3.jpg"
                                target="_blank">社会信用代码:913101070678091460</a></p>
                        <p class="gov-p"><a href="//static.mcake.com/file/9cf52502c183b213/64537636f9b040f8.jpg"
                                target="_blank">食品经营许可证:JY13101070034251</a></p>
                    </div>
                    <div class="bot-p2">
                        <p>上海卡法电子商务有限公司北京分公司</p>
                        <p>地址:北京市朝阳区望京西路甲50号1号楼6层1-08内606单元</p>
                        <p>洽谈电话:010-64720188</p>
                        <p class="gov-p"><a href="//static.mcake.com/file/fff42d8b8ff23356/56acc718c877.jpg"
                                target="_blank">社会信用代码:911101053484280752</a></p>
                        <p class="gov-p"><a href="//static.mcake.com/file/fff42d8b8ff23356/39408cbe5632.jpg"
                                target="_blank">食品经营许可证:JY11105262932938</a></p>
                    </div>
                    <div class="bot-p3">
                        <p>上海卡法电子商务有限公司杭州分公司</p>
                        <p>地址:杭州市拱墅区朝晖路179号嘉汇大厦2号楼25-1室</p>
                        <p>洽谈电话:0571-28103688</p>
                        <p class="gov-p"><a href="//static.mcake.com/file/0892df100e0f3c76/09c369ed881ad213.jpg"
                                target="_blank">社会信用代码:913301060920344424</a></p>
                        <p class="gov-p"><a href="//static.mcake.com/file/233aaf781606c528/4e3cc903c472f0d1.jpg"
                                target="_blank">食品经营许可证:JY13301050141226</a></p>
                    </div>
                </div>
                <p class="copyright">Copyright © 2012-2023 上海卡法电子商务有限公司 版权所有 l <a href="http://beian.miit.gov.cn"
                        target="_blank">沪ICP备12022075号</a> l <a
                        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010702005582"
                        target="_blank">沪公网安备31010702005582号</a></p>
            </div>
        </div>
    </div>

    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                type:[],
                kg_id:[],
                kg:{},
                dg_id:{
                    k:{id:"",kg:""}
                 },
            },
            
            created() {
                // axios.get("http://127.0.0.1:1234/Type/type")
                // .then(rep => {
                //     this.type = rep.data;
                //     console.log(this.type)
                // })

                axios.get("http://127.0.0.1:1234/Kg/kg")
                 .then(rep => {
                     this.kg = rep.data;    
                     console.log(this.kg)
                 })

                    this.dg_id.id = getParameterByName("id")

                axios.get("http://127.0.0.1:1234/Dg/" + this.dg_id.id)
                    .then(res => {
                        this.dg_id = res.data;
                        console.log(this.dg_id)
                    })
            },

            methods:{
                getImgUrl(name){
            return "/image/"+name
          },

          add(dg_id){
            axios
              .post(`http://127.0.0.1:1234/Dg`, dg_id)
                    .then((response) => {
                        if (response.data === 1) {
                            alert("添加到购物车成功！");
                        }
                    })
                    .catch((err) => {
                        alert(err);
                    });
          },
            }
        })
        window.alert = alert;
        function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
        results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return "";
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    </script>

</body>

</html>